<template>
  <div>
    <a-layout style="padding: 24px 24px 0; background: #fff">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row type="flex">
            <a-col v-show="switchTable">
              <a-popover :overlayStyle="{background: 'white'}" placement="topLeft">
                <template slot="content">
                  <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle" />
                  <span
                    style="margin-left: 5px">点击此处返回分类列表</span>
                </template>
                <a-button
                  icon="arrow-left"
                  style="margin-right: 20px"
                  @click="backCommon"
                >返回
                </a-button>
              </a-popover>
              <a-divider style="margin-right: 20px" type="vertical" />
            </a-col>
            <a-col>
              <a-button icon="plus" style="margin-right: 20px" type="primary" @click="openAdd()">新增</a-button>
              <a-divider style="margin-right: 20px" type="vertical" />
            </a-col>
            <a-col :md="5" :sm="7" style="margin-left: 15px">
              <a-form-item label="2级分类">
                <a-input v-model="queryParam.level2_fake" placeholder="请输入2级分类"></a-input>
              </a-form-item>
            </a-col>
            <a-col flex="auto" style="margin-left: 15px">
            <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;margin-right: 20px">
              <a-button icon="search" style="margin-left: 10px" type="primary" @click="searchQuery">查询</a-button>
              <a-popover :overlayStyle="{background: 'white'}" placement="topLeft">
                <template slot="content">
                  <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle" /><span
                  style="margin-left: 5px">可以点击重置来重新筛选结果</span>
                </template>
                <a-button
                  icon="reload"
                  style="margin-left: 8px"
                  @click="searchReset"
                >重置</a-button>
              </a-popover>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-layout>
    <a-layout v-show="!switchTable" style="padding: 0 0 24px; background: #fff">
      <a-layout-sider style="background: #fff" width="240">
        <a-menu
          :default-open-keys="['000']"
          :default-selected-keys="['000']"
          mode="inline"
          style="height: 100%"
          @click="handleClick"
        >
          <template v-for="i in filterPersons">
            <a-menu-item v-if="i.single" :key="i.key">
              <a-icon :type="i.logo" style="margin-right: 14px" />
              <span>{{ i.name }}</span>
            </a-menu-item>
            <a-sub-menu v-if="!i.single" :key="i.key">
              <span slot="title"> <a-icon :type="i.logo" style="margin-left: 4px" /> {{ i.name }}</span>
              <a-menu-item v-for=" it in i.items" :key="it.level1_id" @click="handleClick2(it)">
                {{ it.level1 }}
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '560px' }">
        <track-common-page ref="commonPage" :titleKey="currentPage" :titleNameCH="currentPageNameCH"
                           :titleNameEN="currentPageNameEN"
                           :updateFlag="updateFlag" />
      </a-layout-content>
    </a-layout>
    <a-layout v-show="switchTable" style="padding: 0 0 24px; background: #fff">
      <a-card :bordered="false">
        <div>
          <a-table
            ref="table"
            :columns="columns"
            :dataSource="dataSource"
            :loading="loading"
            :pagination="ipagination"
            :scroll="{ x: 1500}"
            bordered
            rowKey="id"
            size="middle"
            @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a-button style="margin-right: 10px" type="primary" @click="handleEdit(record)">
            编辑
          </a-button>
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a-button>
                删除
              </a-button>
            </a-popconfirm>
        </span>
          </a-table>
        </div>
      </a-card>
    </a-layout>
    <track-modal ref="modalForm" @loadData="commonPageLoad" @ok="modalFormOk"></track-modal>
  </div>
</template>

<script>
import { getAction } from '@api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TrackCommonPage from '@views/dataVisualization/components/trackCommonPage'
import TrackSearchPage from '@views/dataVisualization/components/trackSearchPage'
import TrackModal from '@views/dataVisualization/components/trackModal'

const sort = ['工业产品', '能源产品', '生活产品', '废弃物处理', '交通服务', '碳汇'] // 侧边栏排序，左边数组的从左至右对应侧边栏从上至下
const list = [
  {
    name: '工业产品',
    key: 'sub' + (sort.indexOf('工业产品') + 1).toString(),
    logo: 'control',
    single: false,
    items: []
  },
  {
    name: '能源产品',
    key: 'sub' + (sort.indexOf('能源产品') + 1).toString(),
    logo: 'bar-chart',
    single: false,
    items: []
  },
  {
    name: '生活产品',
    key: 'sub' + (sort.indexOf('生活产品') + 1).toString(),
    logo: 'build',
    single: false,
    items: []
  },
  {
    name: '废弃物处理',
    key: 'sub' + (sort.indexOf('废弃物处理') + 1).toString(),
    logo: 'font-colors',
    single: false,
    items: []
  },
  {
    name: '交通服务',
    key: 'sub' + (sort.indexOf('交通服务') + 1).toString(),
    logo: 'tool',
    single: false,
    items: []
  },
  {
    name: '碳汇',
    key: 'sub' + (sort.indexOf('碳汇') + 1).toString(),
    logo: 'tool',
    single: false,
    items: []
  }
]
let level1List = []
getAction('/carbon/carbonFootprint/getData').then(res => {
  console.log(res.result)
  level1List = res.result
  localStorage.setItem('list', JSON.stringify(res.result))
  for (let i = 0; i < res.result.length; i++) {
    list[i].items = res.result[i].list
  }
})

export default {
  mixins: [JeecgListMixin],
  components: {
    TrackCommonPage,
    TrackSearchPage,
    TrackModal
  },
  data() {
    return {
      queryParam: {
        level2: ''
      },
      sort2: sort,
      currentPage: '000',
      collapsed: false,
      list: list,
      currentPageNameCH: '变压器、整流器和电感器',
      currentPageNameEN: 'Transformer, rectifier and inductor',
      updateFlag: 0,
      dataSource: [],
      columns: [
        {
          title: '2级分类',
          dataIndex: 'level2',
          align: 'left',
          width: 150,
          fixed: true
        },
        {
          title: '3级分类',
          dataIndex: 'level3',
          align: 'left',
          width: 150,
          fixed: true
        },
        {
          title: '上游排放',
          dataIndex: 'upstreamEmissions',
          align: 'center',
          width: 100
        },
        {
          title: '上游排放单位',
          dataIndex: 'upstreamEmissionsUnit',
          align: 'left',
          width: 180
        },
        {
          title: '下游排放',
          dataIndex: 'downstreamEmissions',
          align: 'center',
          width: 100
        },
        {
          title: '下游排放单位',
          dataIndex: 'downstreamEmissionsUnit',
          align: 'left',
          width: 150
        },
        {
          title: '排放环节',
          dataIndex: 'emissionProcesses',
          align: 'left',
          width: 300
        },
        {
          title: '排放温室气体占比',
          dataIndex: 'ghgPercentage',
          align: 'center',
          width: 200
        },
        {
          title: '不确定性',
          dataIndex: 'uncertainty',
          align: 'left',
          width: 300
        },
        {
          title: '参考文献/数据来源',
          dataIndex: 'dataSource',
          align: 'left',
          width: 1000
        },
        {
          title: '参考文献/简化',
          dataIndex: 'dataSourceShort',
          align: 'left',
          width: 300
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200,
          fixed: 'right'
        }
      ],
      switchTable: false,
      url: {
        list: '/carbon/carbonFootprint/list',
        delete: '/carbon/carbonFootprint/delete'
      }
    }
  },
  computed: {
    filterPersons() {
      // 1. 得到依赖数据
      const { list } = this

      // 2. 进行计算处理, 产生结果数据并返回
      // 过滤
      const arr = list.filter(p => p.key)

      arr.sort((a, b) => {
        //  截取最后一个字母之后的字符串
        const aLast = a.key.slice(3)
        const bLast = b.key.slice(3)
        return aLast - bLast
      })

      return arr
    }
  },
  watch: {
    dataSource: {
      handler: function(val, oldVal) {
        this.dataSource = val
      },
      immediate: true
    },
    'queryParam.level2_fake': {
      handler: function(val, oldVal) {
        if (val !== undefined) {
          this.queryParam.level1Id = ''
          this.queryParam.level2 = '*' + val + '*' || ''
        }
      },
      immediate: true
    }
  },
  beforeDestroy() {
    localStorage.setItem('currentPage', '000')
  },
  methods: {
    backCommon() {
      this.switchTable = false
      this.queryParam = {}
    },
    commonPageLoad() {
      this.$refs.commonPage.loadData()
    },
    //路由内容切换
    searchQuery() {
      this.switchTable = true
      this.loadData(1)
    },
    searchReset() {
      if (!this.switchTable) {
        this.$refs.commonPage.searchReset()
      } else {
        this.queryParam = {}
        this.loadData(1)
      }
    },
    changeMenu(route) {
      console.log(route)
      //获取路由对象并切换
      this.$router.push(route)
    },
    handleClick(item) {
      this.currentPage = item.key
      //  存到localStorage
      localStorage.setItem('currentPage', item.key)
      this.updateFlag++
    },
    handleClick2(item) {
      // 截取空格以前和以后的字符串
      let arr = item.level1.split('（')
      if (arr[1] == undefined) {
        arr = item.level1.split('(')
      }
      this.currentPageNameCH = arr[0]
      this.currentPageNameEN = arr[1]
      //  去掉最后一个字符
      this.currentPageNameEN = this.currentPageNameEN.slice(0, -1)
    },
    openAdd() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    }
  }
}
</script>

<style lang="stylus" scoped>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}

/deep/ .ant-menu-sub.ant-menu-inline {
  background-color: #FAFAFA !important;
}

/deep/ .ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-submenu-title {
  width: calc(96% + 1px) !important;
  margin-left: 2%;
}

/deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  border-radius 8px
  background-color: #E6F7FF !important;
}

/deep/ .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
  border: none !important;
}
</style>

